$(function () {
    // 1. 全选 全不选功能模块
    //      就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    //      事件可以使用change
    $(`.checkall`).change(function() {
        // console.log( $(this).prop(`checked`))
        $(`.j-checkbox, .checkall`).prop(`checked`,$(this).prop(`checked`))
        //全选勾选的时候，小复选框里面的所有背景颜色都会增加上.check-cart-item
       if ($(this).prop(`checked`)) {
         $(`.cart-item`).addClass(`check-cart-item`)
       } else {
        $(`.cart-item`).removeClass(`check-cart-item`)
       }
    })
     

    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。

   $(`.j-checkbox`).change(function () {

//$(`.j-checkbox:checked`).length指代的是复选框勾选的个数，
//$(`.j-checkbox`).length指代的是复选框的个数，
         /* if ($(`.j-checkbox:checked`).length===$(`.j-checkbox`).length) {
            $(`.checkall`).prop(`checked`,true)
         } else {
            $(`.checkall`).prop(`checked`,false)
         } */


         //简化版
         $(`.checkall`).prop(`checked`,$(`.j-checkbox:checked`).length===$(`.j-checkbox`).length)
         if ($(this).prop(`checked`)) {
            $(this).parents(`.cart-item`).addClass(`check-cart-item`)
          } else {
            $(this).parents(`.cart-item`).removeClass(`check-cart-item`)
          }


   })



    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
   $(`.increment`).click(function () {
     let n=$(this).siblings(`.itxt`).val()
     n++
     $(this).siblings(`.itxt`).val(n)
     
     let p=$(this).parents(`.p-num`).siblings(`.p-price`).html()
     p=p.substring(1)
     $(this).parents(`.p-num`).siblings(`.p-sum`).html(`￥`+(p*n).toFixed(2))
     getSum()
   })
  
   
   $(`.decrement`).click(function () {
    let n=+$(this).siblings(`.itxt`).val()
   //n到1就停止，也可以n<=1或者在+$(this).siblings(`.itxt`).val()才可以全等
    if (n===1) {
        return
    }
    n--
    $(this).siblings(`.itxt`).val(n)
     
    let p=$(this).parents(`.p-num`).siblings(`.p-price`).html()
    p=p.substring(1)
    $(this).parents(`.p-num`).siblings(`.p-sum`).html(`￥`+(p*n).toFixed(2)) 
    getSum()
  })
 
// 4. 用户修改文本框的值 计算 小计模块
  $(`.itxt`).change(function () {
    let n=$(this).val()
    let p=$(this).parents(`.p-num`).siblings(`.p-price`).html()
    p=p.substring(1)
    $(this).parents(`.p-num`).siblings(`.p-sum`).html(`￥`+(p*n).toFixed(2)) 
    getSum()
  })
  
    

  getSum();

  function getSum() {
    let count=0   //计算总件数
    let money=0   //计算总价值

   //判定在勾选了小的复选框的情况下 $(`.j-checkbox`).prop(`checked`)
   
   
    $(`.j-checkbox:checked`).parents(`.cart-item`).find(`.itxt`).each(function (index,ele) {
        count+=parseInt($(ele).val())
    })
    $(`.amount-sum em`).text(count)



    $(`.j-checkbox:checked`).parents(`.cart-item`).find(`.p-sum`).each(function (index,ele) {
        money+=parseFloat($(ele).text().substring(1))
    })
    $(`.price-sum em`).text(`￥`+money.toFixed(2))
  } 

   

    // 5. 删除商品模块
    //      (1) 商品后面的删除按钮
   $(`.p-action a`).click(function () {
     $(this).parents(`.cart-item`).remove()
     getSum()
   })
    //      (2) 删除选中的商品
    $(`.remove-batch`).click(function () {
        $(`.j-checkbox:checked`).parents(`.cart-item`).remove()
        getSum()
    })
    //      (3) 清空购物车 删除全部商品
    $(`.clear-all`).click(function () {
        $(`.cart-item`).remove()
        getSum()
    })



    


})
